<template>
  <div>
    <van-index-bar>
      <div v-for="(item, index) in head" :key="index">
        <van-index-anchor :index="list[index]" />
        <van-cell :title="item.label" v-for="(item, index) in item" :key="index"/>
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import { listcities } from '@/api/home'
export default {
  data () {
    return {
      head: [],
      list: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ]
    }
  },
  async created () {
    const { body } = await listcities({ level: 1 })
    console.log(body)
    for (let j = 0; j < this.list.length; j++) {
      this.head.push(
        body.filter((item) => item.short[0].toUpperCase() === this.list[j])
      )
    }
    console.log(this.head)
    // const res = Object.values(body)
    // console.log(res)
    // console.log(res.sort(this.compare('short')))
  },
  methods: {
    // compare (key) {
    //   return function (a, b) {
    //     // 此时的a和b对应的是obj当中的元素
    //     key.split('')
    //     const val1 = a[key[0]]
    //     const val2 = b[key[0]]
    //     return val1 - val2
    //   }
    // }
  }
}
</script>
